<!-- 体征里2级路由VS页面 -->
<template>
  <div id="VsSurface">
    <div class="VsSurfacebox">
      <div class="vsThead">
        <table class="table">
          <thead>
            <tr>
              <th class="text-center" width="20%">时间</th>
              <th class="text-center" width="6%">心率</th>
              <th class="text-center" width="8%">体温</th>
              <th class="text-center" width="6%">脉搏</th>
              <th class="text-center" width="15%">无创收缩压</th>
              <th class="text-center" width="15%">无创舒张压</th>
              <th class="text-center" width="15%">血氧饱和度</th>
              <th class="text-center" width="15%">自主呼吸频率</th>
            </tr>
          </thead>
        </table>
      </div>
      <div class="vsTbody">
        <table class="table table-striped" v-if="signData.length">
          <tbody>
            <tr v-for="item in signData">
              <td class="text-center" width="20%">{{item.时间|filterDate}}</td>
              <td class="text-center" width="6%">{{item.心率}}</td>
              <td class="text-center" width="8%">{{item.体温}}</td>
              <td class="text-center" width="6%">{{item.脉搏}}</td>
              <td class="text-center" width="15%">{{item.无创收缩压}}</td>
              <td class="text-center" width="15%">{{item.无创舒张压}}</td>
              <td class="text-center" width="15%">{{item.血氧饱和度}}</td>
              <td class="text-center" width="15%">{{item.自主呼吸频率}}</td>
            </tr>
          </tbody>
        </table>
        <noSearch v-if="!isShow && signData.length == 0"></noSearch>
        <loading v-if="isShow && signData.length == 0"></loading>
      </div>
    </div>
  </div>
</template>
<script>
import loading from "@/components/loading/loading";
import { apiSigns } from "@/api/api"; //引入体征列表数据
import noSearch from "@/components/search/noSearch"; //导入没有搜索结果组件
export default {
  data() {
    return {
      signData: [],
      isShow: true,
      startDate: "",
      endDate: ""
    };
  },
  mounted() {
    this.getApiSigns();
  },
  methods: {
    getApiSigns() {
      apiSigns({
        patientID: this.$store.getters.ID,
        startDate: this.startDate,
        endDate: this.endDate,
        sort: "desc"
      })
        .then(res => {
          this.signData = [];
          if (JSON.parse(res).Status == -1) {
            this.isShow = false;
          }
          if (JSON.parse(res).Status == 1) {
            this.signData = JSON.parse(res).Data;
            this.isShow = true;
          }
        })
        .catch(err => {
          reject(err.data);
        });
    }
  },
  filters: {
    filterDate(time) {
      if (!time) "";
      time = time.substring(5, 16);
      time = time.replace("T", " ");

      return time;
    }
  },
  components: {
    loading,
    noSearch
  }
};
</script>
<style scoped>
.table > thead > tr > th {
  border-bottom: none;
  white-space: nowrap;
}

.vsThead,
.vsTbody {
  width: 100%;
  /*border:1px solid #f4f4f4;*/
  border-top: none;
}
.vsContent {
  margin-top: -10px;
  padding-right: 30px;
}

.table {
  margin-bottom: 0;
}

.vsThead thead tr {
  height: 42px;
  line-height: 42px;
  background-color: #11a7f3;
  color: #fff;
}

.vsThead > thead > tr > th {
  border-bottom: none;
}

.vsTbody {
  position: relative;
  height: calc(100vh - 410px);
  overflow-y: auto;
  border: 1px solid #ddd;
}

.vsTbody tbody tr td {
  padding: 10px 0;
  vertical-align: middle;
  border-top: 1px solid #ddd;
  color: #333;
}

.vsTbody tbody > tr:first-child > td {
  border-top: none;
}
@media screen and (max-width: 768px) {
  .VsSurfacebox {
    min-width: 730px;
    margin: 0 10px 10px 0;
  }
}
@media screen and (max-width: 425px) {
}
</style>
